﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <h1>User Manager</h1>
        <hr/>
        <div class="page">

        </div>
    </div>
    <script type="text/template" id="user-list-template">
        <a href="#/new" class="btn btn-primary">新建用户</a>
        <hr />
     <table class="table table-striped">
         <thead>
             <tr>
                 <th>First Name</th>
                 <th>Last Name</th>
                 <th>Age</th>
                 <th></th>
             </tr>
         </thead>
         <tbody>
             <% _.each(users,function(user){ %>
             <tr>
                 <td><%= user.get('FirstName') %></td>
                 <td><%= user.get('LastName') %></td>
                 <td><%= user.get('Age') %></td>
                 <td><a href="#/edit/<%= user.get('ID') %>" class="btn">编辑</a></td>
             </tr>
             <% }); %>
         </tbody>
     </table>
    </script>

    <script type="text/template" id="edit-user-template">
        <form class="edit-user-from">
            <h3><%= user ? '更新用户信息' : '创建用户'%></h3>
            <label>First Name</label>
            <input type="text" name="FirstName" value="<%= user ? user.get('FirstName') : '' %>" />
            <label>Last Name</label>
            <input type="text" name="LastName" value="<%= user ? user.get('LastName') : '' %>" />
            <label>Age</label>
            <input type="text" name="Age" value="<%= user ? user.get('Age') : '' %>" />
            <hr />
            <button type="submit" class="btn" >保存</button>
            <% if (user) {%>
                <input type="hidden" name="ID" value="<%=  user.get('ID') %>" />
                <button class="btn btn-danger delete">删除</button>
            <% } %>
        </form>
    </script>
    
    <script type="text/javascript" src="~/Scripts/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="~/Scripts/underscore-min.js"></script>
    <script type="text/javascript" src="~/Scripts/backbone.js"></script>
    <script type="text/javascript">
        $.fn.serializeJson = function () {
            var serializeObj = {};
            var array = this.serializeArray();
            var str = this.serialize();
            $(array).each(function () {
                if (serializeObj[this.name]) {
                    if ($.isArray(serializeObj[this.name])) {
                        serializeObj[this.name].push(this.value);
                    } else {
                        serializeObj[this.name] = [serializeObj[this.name], this.value];
                    }
                } else {
                    serializeObj[this.name] = this.value;
                }
            });
            return serializeObj;
        };

        $.ajaxPrefilter(function (options, originalOptions, jqXHR) {
            options.url = "http://localhost:23281/Home" + options.url;
        });

        var Users = Backbone.Collection.extend({
            url: "/Users"
        });

        var User = Backbone.Model.extend({
            urlRoot: "/UserService"
        });

        var UserList = Backbone.View.extend({
            el: '.page',
            render: function () {
                var self = this;
                var users = new Users();
                users.fetch({
                    success: function (users) {
                        var template = _.template($("#user-list-template").html())({ users: users.models });
                        self.$el.html(template);
                    }
                });
               
            }
        });

        var EditUser = Backbone.View.extend({
            el: ".page",
            render: function (options) {
                var self = this;
                if (options.id) {
                    var user = new User({ id: options.id });
                    user.fetch({
                        success: function (user) {
                            var template = _.template($("#edit-user-template").html())({user:user});
                            self.$el.html(template);
                        }
                    });

                } else {
                    var template = _.template($("#edit-user-template").html())({ user: null });
                    self.$el.html(template);
                }
              
            },
            events: {
                'submit .edit-user-from': 'saveUser',
                'click .delete':'deleteUser'
            },
            saveUser: function (ev) {
                var model = $(ev.currentTarget).serializeJson();
                var user = new User();
                user.save(model, {
                    success: function (user) {
                        router.navigate('', { trigger: true });
                    }
                });
                return false;
            },
            deleteUser: function (ev) {
                this.user.destroy({
                    success: function () {
                        router.navigate('', { trigger: true });
                    }
                });
                return false;
            }
        });

        var Router = Backbone.Router.extend({
            routes: {
                "": "home",
                'new': "editUser",
                'edit/:id': "editUser"
            }
        });

        var userList = new UserList();
        var editUser = new EditUser();

        var router = new Router();
        router.on('route:home', function () {
            userList.render();
        });
        router.on('route:editUser', function (id) {
            editUser.render({id:id});
        });

        Backbone.history.start();
    </script>
</body>
</html>
